<template>
  <div id="app">
    <div class="go-top" @click="handleGoTop">
      <i class="iconfont">&#xe647;</i>
      <br>
      顶部
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  export default{
    name: 'APP',
    created () {
      let triggerEvent = (node) => { // 触发input事件
        let event = document.createEvent('HTMLEvents')
        event.initEvent('input', true, true)
        node.dispatchEvent(event)
      }
      document.addEventListener('focusout', (e) => {
        let target = e.target
        if (/^(input|textarea)$/i.test(target.nodeName) && target.value && target.getAttribute('maxLength') && target.maxLength < target.value.length) { // 异常处理
          target.value = target.value.substring(0, target.maxLength)
          if (target.dispatchEvent) {
            triggerEvent(target)
          }
        }
      }, false)
      if(document.all && /MSIE 9./i.test(navigator.appVersion)) { // ie 9兼容处理
        let $timer = null
        let handle = (e) => {
          $timer && clearTimeout($timer)
          let target = e.target
          if (target.dispatchEvent) {
            $timer = setTimeout(() => {
              triggerEvent(target)
            }, 150)
          }
        }
        document.addEventListener('keyup', handle, false)
        document.addEventListener('focusout', handle, false)
      }
    },
    mounted () {
      let node = this.$el.querySelector('.go-top')
      document.addEventListener('scroll', (e) => { // 返回顶部是否显示逻辑
        this.$timer && clearTimeout(this.$timer)
        this.$timer = setTimeout(() => {
          let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
          node.style.opacity = scrollTop > 400 ? 1 : 0
        }, 100)
      }, false)
    },
    methods: {
      handleGoTop () { // 返回顶部事件
        document.body.scrollTop = document.documentElement.scrollTop = 0
      }
    }
  }
</script>
<style lang="scss">
    a {
        text-decoration: none;
    }
    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;
        height: 0;
        line-height: 0;
        clear: both;
        visibility: hidden
    }
    .clearfix {
        display: block;
        zoom: 1;
    }
    .fl {
        float: left;
    }
    .fr {
        float: right;
    }

    .bold {
        font-weight: 700;
    }

    .content-body {
        padding: 60px;
    }

    .relative {
        position: relative;
    }

    .ab {
        position: absolute;
    }

    .full-width {
        width: 100% !important;
    }

    .frame-body{
        padding-bottom: 40px;
    }
    .hidden {
        text-overflow:ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .run img{
        max-width: 100%;
    }
    .orange-btn,
    .orange-btn:hover,
    .orange-btn:active,
    .orange-btn:focus{
        background: #fc6f00!important;
        color:#fff!important;
        border-color: #fc6f00!important;
    }
    .go-top{
      position:fixed;
      z-index: 100;
      background:rgba(0,0,0,0.4);
      color:#fff;
      border-radius:50%;
      text-align:center;
      width:50px;
      height:50px;
      bottom:30px;
      right:30px;
      box-sizing: border-box;
      padding-top: 4px;
      cursor: pointer;
      opacity:0;
      transition: opacity 0.5s ease 0s,background 0.2s ease 0s;
      .iconfont{
        font-size:20px;
        color:#fff;
        margin-left: 2px;
      }
      &:hover{
        background:rgba(0,0,0,0.6)
      }
    }
</style>
